<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>动态效果 - 圆</title>
	<script src="d3/d3.v3.min.js" charset="utf-8"></script>
	
</head>
<body>
<p>点击圆，然后查看控制台</p>
</body>
<script type="text/javascript">



//画布大小
var width = 800;
var height = 800;

//在 body 里添加一个 SVG 画布   
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

//画一个圆
var circle = svg.append("circle")
	.attr("cx", 100)
	.attr("cy", 100)
	.attr("r", 45)
	.style("fill","green");

//在1秒（1000毫秒）内将圆心坐标由100变为300
circle.transition()
    .duration(1000)
    .attr("cx", 300);


circle.on("click", function(){
    //在这里添加交互内容
    console.log("Hello!");
    console.log(d3.event);
});


</script>
</html>
